<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性</title>
  <style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }

    th,
    td {
      border: 1px solid #000;
    }

    h3 {
      position: relative;
    }
  </style>
</head>

<body>
  <!-- 
  计算属性：
  概念：基于现有的数据，计算出来的新属性，依赖的数据变化，自动重新计算
  语法：
  1.声明在computed配置项中，一个计算属性对应一个函数
  2.使用起来和普通属性一样使用{{计算属性名}}

  计算属性与methods方法的区别：
  1.computed:作用：封装了一段对于数据的处理，求得一个结果
  methods 作用：给实例提供一个方法，调用以处理业务逻辑
  作用：卸载methods配置相中 2，作为方法，需要调用 -》 this.方法名() {{方法名()}} @事件名 = “方法名” 
  
  最大的区别：缓存特性（提升性能）
  计算属性会对计算处理的结果进行缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算 -》并再次缓存
  
  -->
  <div id='app'>
    <h3>礼物清单</h3>
    <table>
      <tr>
        <th>名称</th>
        <th>数量</th>
      </tr>
      <tr v-for=" item in list" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
      </tr>
    </table>
    <p>礼物总数：{{totalCount}} 个</p>
    <p>礼物总数：{{totalCount}} 个</p>
    <p>礼物总数：{{totalCount}} 个</p>
    <p>礼物总数：{{totalCount}} 个</p>
    <p>礼物总数：{{totalCount}} 个</p>
    <p>礼物总数：{{totalCount}} 个</p>
    <p>礼物总数：{{totalCount}} 个</p>
    <button @click="changeNum()">修改数量：</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'iphone', num: 1 },
          { id: 2, name: 'ipad', num: 2 },
          { id: 3, name: 'mac', num: 4 },
        ]
      },
      methods: {
        changeNum() {
          this.list[0].num = 10
        }
      },
      // 计算属性配置项 是一个属性，不是函数，上面引用不能加()
      computed: {
        // 计算属性有缓存，一个页面多次调用，只会执行一次
        // totalCount() {
        //   // 完整写法
        //   console.log('执行了');

        //   // 计算属性函数内部，可以直接通过this访问到app实例
        //   // 对数组中的某一项求和
        //   return this.list.reduce((sum, item) => sum + item.num, 0)
        //   // return 6
        // }

        // 完整写法
        totalCount: {
          // 获取
          // 会将返回值作为求值的结果
          get() {
            return this.list.reduce((sum, item) => sum + item.num, 0)
          },
          // 设置
          // 修改的值会传给vule
          set(value) {
            console.log(value);

          }
        }

      }
    })
  </script>
</body>

</html>